<template>
	<Echart id="leftCenter" :options="options" class="left_center_inner" ref="charts" />
</template>

<script>
	import {
		currentPOST
	} from 'api/modules'
	export default {
		data() {
			return {
				options: {},
				pageflag: true,
				timer: null
			};
		},
		created() {
			this.getData()
		},
		beforeDestroy() {
			this.clearData()
		},
		methods: {
			clearData() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			},
			getData() {
				this.pageflag = true
				currentPOST('/ipac-apic/bigScreen/deviceUseCount').then(res => {
					// if (!this.timer) {
						// console.log("使用情况", res);
					// }
					if (res.code == 200) {
						this.$nextTick(() => {
							this.init(res.data)
							this.switper()
						})
					} else {
						this.pageflag = false
						this.$Message({
							text: res.msg,
							type: 'warning'
						})
					}
				})
			},
			//轮询
			switper() {
				if (this.timer) {
					return
				}
				let looper = (a) => {
					this.getData()
				};
				this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
				let myChart = this.$refs.charts.chart
				myChart.on('mouseover', params => {
					this.clearData()
				});
				myChart.on('mouseout', params => {
					this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
				});
			},
			init(data) {
				let total = data.infrastructureOrderCount+data.instrumentOrderCount;
				let colors = ["#ECA444", "#33A1DB"];
				let piedata = {
					name: "仪器使用情况",
					type: "pie",
					radius: ["42%", "65%"],
					avoidLabelOverlap: false,
					itemStyle: {
						borderRadius: 4,
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 2,
					},

					color: colors,
					data: [
						{
							value: data.instrumentOrderCount,
							name: "仪器",
							label: {
								shadowColor: colors[0],
							},
						},
						{
							value: data.infrastructureOrderCount,
							name: "设施",
							label: {
								shadowColor: colors[2],
							},
						},
					],
				};
				this.options = {
					title: {
						text: ["{value|" + total + "}", "{name|总数}"].join("\n"),
						top: "center",
						left: "center",
						textStyle: {
							rich: {
								value: {
									color: "#ffffff",
									fontSize: 24,
									fontWeight: "bold",
									lineHeight: 20,
								},
								name: {
									color: "#ffffff",
									lineHeight: 20,
								},
							},
						},
					},
					tooltip: {
						trigger: "item",
						backgroundColor: "rgba(0,0,0,.6)",
						borderColor: "rgba(147, 235, 248, .8)",
						textStyle: {
							color: "#FFF",
						},
					},
					legend: {
						show: false,
						top: "5%",
						left: "center",
					},
					series: [
						//展示圆点
						{
							...piedata,
							tooltip: {
								show: true
							},
							label: {
								formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
								rich: {
									b: {
										color: "#fff",
										fontSize: 12,
										lineHeight: 26,
									},
									c: {
										color: "#31ABE3",
										fontSize: 14,
									},
									per: {
										color: "#31ABE3",
										fontSize: 14,
									},
								},
							},
							labelLine: {
								length: 20, // 第一段线 长度
								length2: 36, // 第二段线 长度
								show: true,

							},
							emphasis: {
								show: true,
							},
						},
						{
							...piedata,
							tooltip: {
								show: true
							},
							itemStyle: {},
							label: {
								backgroundColor: "inherit", //圆点颜色，auto：映射的系列色
								height: 0,
								width: 0,
								lineHeight: 0,
								borderRadius: 2.5,
								shadowBlur: 8,
								shadowColor: "auto",
								padding: [2.5, -2.5, 2.5, -2.5],
							},
							labelLine: {
								length: 20, // 第一段线 长度
								length2: 36, // 第二段线 长度
								show: false,
							},
						},
					],
				};
			},
		},
	};
</script>
<style lang='scss' scoped>
</style>